<template>
  <div class="flex_box">
    <div class="flex_Left">
      <el-tree :data="treeData" show-checkbox default-expand-all node-key="catalogueId" ref="tree" :props="defaultProps" @check="checkFun">
      </el-tree>
    </div>
    <div class="flex_right">
      <h2>已选章节</h2>
      <ul>
        <li v-for="(item, index) in rightData" :key="item.catalogueId">
          <span>{{ item.catalogueName }} </span>
          <i class="el-icon-delete" @click="deleteFun(item, index)"></i>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
export default {
  name: 'ElementComponetsQuestionTextTree',

  data() {
    return {
      treeData: [
        {

          "catalogueId": 7,
          "parentCatalogueId": 2,
          "parentCatalogueIdStr": ",2,,7,",
          "classifyId": 6,
          "catalogueName": "测试目录-二级3-目录-7",
          "classifyName": "语文 高中",
          "children": [
            {
              "catalogueId": 9,
              "parentCatalogueId": 7,
              "parentCatalogueIdStr": ",2,,7,,9,",
              "classifyId": 6,
              "catalogueName": "测试目录-三级-3-1 目录-9",
              "classifyName": "语文 高中",
              "children": []
            }
          ]
        },
        {
          "catalogueId": 6,
          "parentCatalogueId": 2,
          "parentCatalogueIdStr": ",2,,6,",
          "classifyId": 6,
          "catalogueName": "测试目录-二级2-目录-6",
          "classifyName": "语文 高中",
          "children": [
            {
              "catalogueId": 10,
              "parentCatalogueId": 6,
              "parentCatalogueIdStr": ",2,,6,,10,",
              "classifyId": 6,
              "catalogueName": "测试目录-三级-2-2 目录-10",
              "classifyName": "语文 高中",
              "children": []
            },
            {
              "catalogueId": 8,
              "parentCatalogueId": 6,
              "parentCatalogueIdStr": ",2,,6,,8,",
              "classifyId": 6,
              "catalogueName": "测试目录-三级2-1 目录-8",
              "classifyName": "语文 高中",
              "children": []
            }
          ]
        },
        {
          "catalogueId": 3,
          "parentCatalogueId": 2,
          "parentCatalogueIdStr": ",2,,3,",
          "classifyId": 6,
          "catalogueName": "测试目录-二级",
          "classifyName": "语文 高中",
          "children": [
            {
              "catalogueId": 5,
              "parentCatalogueId": 3,
              "parentCatalogueIdStr": ",2,,3,,5,",
              "classifyId": 6,
              "catalogueName": "测试目录-超级人",
              "classifyName": "语文 高中",
              "children": [
                {
                  "catalogueId": 11,
                  "parentCatalogueId": 5,
                  "parentCatalogueIdStr": ",2,,3,,5,,11,",
                  "classifyId": 6,
                  "catalogueName": "测试目录-四级",
                  "classifyName": "语文 高中",
                  "children": []
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'catalogueName'
      },
      rightData: [],
      checkedKeys: [],//当前所选得数组id
      delData: []
    };
  },

  mounted() {

  },

  methods: {
    checkFun(e, j) {
      this.checkedKeys = j.checkedKeys;
      this.rightData = [];
      this.handleRightData(this.treeData);
    },
    // 处理数据
    handleRightData(list) {
      list.forEach(item => {
        if (this.checkedKeys.indexOf(item.catalogueId) != -1) {
          this.rightData.push(item);
        } else {
          this.handleRightData(item.children);
        }
      })
    },
    deleteFun(item, index) {
      this.delData = [];
      this.delData.push(item.catalogueId);
      // 处理子级数据
      this.handleDel(item.children);

      this.$nextTick(() => {
        console.log(this.delData, this.checkedKeys);
        this.delData.forEach(item => {
          if (this.checkedKeys.indexOf(item) != -1) {
            let i = this.checkedKeys.indexOf(item);
            this.checkedKeys.splice(i, 1);
          }
        })
        
        this.$refs.tree.setCheckedKeys(this.checkedKeys);
      })
      
      this.rightData.splice(index, 1);
    },
    // 处理数据
    handleDel(list) {
      list.forEach(item => {
        this.delData.push(item.catalogueId);
        this.handleDel(item.children);
      })
    }
  },
};
</script>

<style>
h2 {
  padding: 0;
  margin: 0;
}

.flex_box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px 0;
}

.flex_right {
  margin-left: 50px;
}

.flex_box .el-button {
  margin-left: 10px;
}
</style>